@charset "UTF-8";
/* -------------------------------------------------
 * overlay css for dialog panel
 * ------------------------------------------------- */
.content{
	color: #666;
	font-size: 16px;
	position: relative;
	height: 100%;
	padding: 20px;
	legend{
		display: block;
		text-align: left;
		line-height: 32px;
		font-size: 18px;
		font-weight: bold;
	}
}

.form-group{
	.tbl{
		box-sizing: border-box;
		width: 100%;
		border-collapse:collapse;
	}
	.form-input{
		.tbl-cell{
			width: getPercent(3,6,true,10%);
		}
	}
	input[type='text'],input[type='password'],input[type='email']{
		box-sizing: border-box;
		width: 100%;
		height: 40px;
		line-height: 40px;
		padding: 0 8px;
		border: 1px solid $grayColor;
		&:focus{
			border-color: $themeColor;
			&::-webkit-input-placeholder{
				color: $themeColor;
			}
			&:-moz-placeholder{
				color: $defaultColor;
			}
			&::-moz-placeholder{
				color: $defaultColor;
			}
			&::-ms-input-placeholder{
				color: $defaultColor;
			}
		}
	}
	input[type='submit']{
		background-color:$themeColor;
	    border: medium none;
	    border-radius: 6px;
	    color: #fff;
	    padding: 8px 70px;
	    @include allTransition;
	    &:hover{
	    	background-color: $themeHoverColor;
	    }
	}
	.forget{
		margin-left: 20px;
		color: $themeColor;
		i{
			color:$themeColor;
		}
	}
	label{
		color: $defaultColor;
	    font-size: 14px;
	}
	span>a{
		border-radius: 40%;
		display: inline-block;
		font-size: 16px;
		height: 24px;
		line-height: 24px;
		text-align: center;
		width: 24px;
		background-color: $themeColor;
		i{
			padding: 0;
			margin: 0;
			color: $white;
		}
	}
	.agreements{
		text-decoration: none;
		color: $themeColor;
		font-size: 14px;
		&:hover{
			color: $bindColor;
		}
	}
}
.remember-group{
	.input-group{
		display: inline-block;
	}
}

.input-group{
	margin: 0 0 30px;
	position: relative;
	label.sr-only{
		clip: (0,0,0,0);
		width: 1px;
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
	}
}

.model-footer{
	position: absolute;
	bottom: 0;
	width: 100%;
	left: 0;
	height: 40px;
	border-top: 1px solid $themeColor;
	line-height: 38px;
	z-index: 100;
	a{
		color: $themeColor;
		text-decoration: none;
		i{
			color: $themeColor;
		}
	}
	i.fa-angle-right{
		margin-left: 3px;
	}
	i.fa-angle-left{
		margin-right: 3px;
	}
}

.shortcut{
	text-align: left;
	.shortcut-tit{
		h3{
			border-bottom: 1px dotted $themeColor;
		    font-size: 16px;
		    height: 57px;
		    text-align: center;
		}
		.shortcut-tab{
			border: 1px solid $themeColor;
		    border-radius: 3px;
		    display: table;
		    margin: -15px auto 0;
		    overflow: hidden;
		    text-align: center;
		    width: 10%;
			a{
				text-decoration: none;
			    display: table-cell;
			    width: 50%;
			    padding: 2px 0;
				color: $themeColor;
    			background-color: #fff;
			    i.fa{
					color: $themeColor;
			    }
			}

			a.shortcut-active {
			    color: #fff;
				background-color: $themeColor;
    			i.fa{
					color: #fff;
			    }
			}
		}
	}
	.shortcut-list{
		overflow: auto;
		margin: 10px 0;
		ul{
			border-left: 1px solid $grayColor;
    		border-top: 1px solid $grayColor;
		}
		.list-item{
			outline: none;
			border-bottom: 1px solid $grayColor;
		    border-right: 1px solid $grayColor;
		    box-sizing: border-box;
		    height: 92px;
		    vertical-align: top;
		    width: 20%;
		    padding: 2px 1px 1px 2px;
			&.active{
				padding: 0px;
				border: 2px solid $themeColor;
			}
			a{
				outline: none;
			}
		}
	}
	.shortcut-footer{
		border-top: 1px dotted $themeColor;
    	text-align: center;
    	span{
    		margin-right: 10px;
    	}
	}
}